<template>
  <div ref="myDiv" style="height: 100%;">
    <el-card class="update-log" style="height: 100%;background-color: #0C2136;border-color: #123355;">
      <div slot="header" class="clearfix" style="border-bottom: #123355;">
        <span style="color: #ffffff;display: flex;align-items: center;">报警数据<div v-if="list.length > 0" class="circle"
            style="margin-left: 5px;"><span class="number">{{list.length}}</span></div></span>

      </div>
      <div class="body">
        <ul class="infinite-list" ref="myList" @mouseenter="pauseScroll" @mouseleave="resumeScroll" style="overflow:auto;color: #fff;padding: 1px;">
          <li class="infinite-list" v-for="(item,index) in list">
            <div style="display: flex;">
              <img src="@/assets/images/huoj.png" style="width: 25px;height: 25px;margin-top: 10px;" />
              <div style="margin-left: 10px;font-size: 11px;">
                {{item.detailedAddress}}{{item.buildingName}}栋{{item.floorName}}
                {{item.logAlert}}报警{{item.updateLogTime}}
              </div>
            </div>
          </li>
        </ul>
      </div>
    </el-card>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        list: [{
            "detailedAddress": "湖南省郴州市北湖区郴江街道天盛,",
            "buildingName": "1",
            "floorName": "1层105房间",
            "logAlert": "开锁报警",
            "updateLogTime": "2024-04-21 18:02:25"
          },
          {
            "detailedAddress": "湖南省郴州市北湖区郴江街道天盛,",
            "buildingName": "1",
            "floorName": "1层105房间",
            "logAlert": "开锁报警",
            "updateLogTime": "2024-04-21 18:02:25"
          },
          {
            "detailedAddress": "湖南省郴州市北湖区郴江街道天盛,",
            "buildingName": "1",
            "floorName": "1层105房间",
            "logAlert": "开锁报警",
            "updateLogTime": "2024-04-21 18:02:25"
          },
          {
            "detailedAddress": "湖南省郴州市北湖区郴江街道天盛,",
            "buildingName": "1",
            "floorName": "1层105房间",
            "logAlert": "开锁报警",
            "updateLogTime": "2024-04-21 18:02:25"
          },
          {
            "detailedAddress": "湖南省郴州市北湖区郴江街道天盛,",
            "buildingName": "1",
            "floorName": "1层105房间",
            "logAlert": "开锁报警",
            "updateLogTime": "2024-04-21 18:02:25"
          }

        ],
        bodyStyle: {
          backgroundColor: '#fff',

        },
        autoScrollInterval: null, // 自动滚动的interval引用
        scrollSpeed: 1, // 滚动速度（像素/帧）
        isPaused: false // 是否暂停滚动
      }
    },
    mounted() {
      this.setListHeight();
      window.addEventListener('resize', this.setListHeight); // 如果需要，也可以监听窗口大小变化
      this.startAutoScroll(); // 启动自动滚动
    },
    beforeDestroy() {
      window.removeEventListener('resize', this.setListHeight); // 清理事件监听器
      this.stopAutoScroll(); // 清理自动滚动
    },
    created() {},
    methods: {
      setListHeight() {
        const myDivHeight = this.$refs.myDiv.clientHeight; // 获取容器的高度
        const desiredHeight = myDivHeight - 120; // 减去额外的高度，如标题栏等的高度
        this.$refs.myList.style.height = `${desiredHeight}px`; // 设置ul的高度
      },
      init(data) {
        this.list.push(...data.warningList)
      },
      add(data) {
        this.list.unshift(data)
        // this.list.pop()
      },
      startAutoScroll() {
        if (this.isPaused) return; // 如果处于暂停状态，不启动滚动
        const scrollContainer = this.$refs.myList;
        this.autoScrollInterval = setInterval(() => {
          if (scrollContainer && !this.isPaused) {
            // 如果滚动到底部，重置到顶部
            if (scrollContainer.scrollTop + scrollContainer.clientHeight >= scrollContainer.scrollHeight) {
              scrollContainer.scrollTop = 0;
            } else {
              scrollContainer.scrollTop += this.scrollSpeed;
            }
          }
        }, 50);
      },
      pauseScroll() {
        this.isPaused = true;
        this.stopAutoScroll();
      },
      resumeScroll() {
        this.isPaused = false;
        this.startAutoScroll();
      },
      stopAutoScroll() {
        if (this.autoScrollInterval) {
          clearInterval(this.autoScrollInterval);
          this.autoScrollInterval = null;
        }
      }
    }
  }
</script>

<style scoped lang="scss">
  .el-card ::v-deep .el-card__header {
    padding: 7px 15px 7px;
    background: linear-gradient(to bottom, #1B506E, #173F5A, #13324C);
    border-bottom: #123355;
  }

  .circle {
    margin-left: 5px;
    width: 23px;
    height: 23px;
    border-radius: 50%;
    background-color: #BE051A;
    display: flex;
    /* 使用 Flexbox 布局 */
    align-items: center;
    /* 垂直居中 */
    justify-content: center;
    /* 水平居中 */
  }

  .number {
    font-size: 1rem;
    color: #ffffff;
  }

  ul {
    list-style: none;
  }
</style>
